<template>
  <div id="app">
    <router-view></router-view>

    <!--<ul id="list" v-show="bol">
    	<li><router-link to="/wechat">首页</router-link></li>
    	<li><router-link to="/connect">分类</router-link></li>
    	<li><router-link to="/find">购物车</router-link></li>
    	<li><router-link to="/me">我的</router-link></li>
    </ul>-->

<<<<<<< HEAD
   <!--  <ul id="list">
    	<li class="li" @click="fun(0)"><router-link to="/wechat">
      <span class="mui-icon mui-icon-home"></span>首页</router-link></li>
    	<li class="li" @click="fun(1)"><router-link to="/connect"><span class="mui-icon mui-icon-settings"></span>分类</router-link></li>
    	<li class="li" @click="fun(2)"><router-link to="/find"><span class="mui-icon mui-icon-bars"></span>购物车</router-link></li>
    	<li class="li" @click="fun(3)"><router-link to="/me"><span class="mui-icon mui-icon-person"></span>我的</router-link></li>
=======
    <ul id="list">
    	<li class="li" @click="fun(0)"><router-link to="/wechat"><span class="mui-icon mui-icon-home"></span><br/><span class="txt">首页</span></router-link></li>
    	<li class="li" @click="fun(1)"><router-link to="/connect"><span class="mui-icon mui-icon-chatboxes"></span><br/><span class="txt">分类</span></router-link></li>
    	<li class="li" @click="fun(2)"><router-link to="/find"><span class="mui-icon mui-icon-bars"></span><br/><span class="txt">购物车</span></router-link></li>
    	<li class="li" @click="fun(3)"><router-link to="/me"><span class="mui-icon mui-icon-person"></span><br/><span class="txt">我的</span></router-link></li>
>>>>>>> master

    </ul> -->
     <ul id="list">
      <li class="li" @click="fun(0)"><router-link to="/wechat">
      <span class="logo mui-icon mui-icon-home"></span><br>
      <span class="txt">首页</span></router-link></li>
      <li class="li" @click="fun(1)"><router-link to="/connect">
      <span class="logo mui-icon mui-icon-chatboxes"></span><br>
      <span class="txt">分类</span></router-link></li>
      <li class="li" @click="fun(2)"><router-link to="/find">
      <span class="logo mui-icon mui-icon-bars"></span><br>
      <span class="txt">购物车</span></router-link></li>
      <li class="li" @click="fun(3)"><router-link to="/me">
      <span class="logo mui-icon mui-icon-person"></span><br>
      <span class="txt">我的</span></router-link></li>

    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',

  data(){
  	return{
  		bol:true
  	}
  },
  methods:{
  	fun:function(i){
  		console.log($(".li").eq(i));
  		$(".li").eq(i).find("a").css("color","red").find("span").css("color","red");
  		$(".li").eq(i).siblings().find("a").css("color","#333").find("span").css("color","#333");
  	},
//	showColor:function(index){
//			return this.colorNum == index ? "isColor":"";
//		},
  },
  beforeCreate:function(){
			
	},
}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
	html{
		font-size: 62.5%;
	}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#list{
	display: flex;
	justify-content: space-around;
	background: white;
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 4rem;
	align-items: center;
	border-top: 1px solid #777777;
}
#list li{
	list-style: none;
<<<<<<< HEAD
	height: 4rem;
  padding: 0.15rem 0;
  text-align: center;
}
#list li a .logo{
  height:2rem;
  line-height: 1rem;
  
}
#list li a .txt{
  height: 1.5rem;
  line-height: 1.5rem;
=======
  text-align: center;
>>>>>>> master
}
#list a{
	font-size: 2rem;
	text-decoration: none;
	color: #333;
}
#list span{
	color:#333;
}
.isColor{
	color: red;
}
#list li:nth-child(1) a{
	color: red;
}
#list li:nth-child(1) span{
	color: red;
}

</style>
